<template>
  <div id="app">
    <div class="mainView">
      <router-view />
    </div>
    
    <section class="banner">
      <router-link to="/">
        <span>&#xe635;</span>
        <div>微信</div>
      </router-link>
      <router-link to="/user">
        <span>&#xe65b;</span>
        <div>我</div>
      </router-link>
    </section>
  </div>
</template>

<script>
import router from "vue-router"
export default {
  name: "App",

  methods: {
    toHome() {
      this.$router.push({
        path: "/"
      })
    },
    toUser() {
      this.$router.push({
        path: "/user"
      })
    }


  }
};
</script>

<style>
#app {
  box-sizing: border-box;
}
a{
  color: rgb(178, 178, 178);
}
.routerActiveClass {
  color: #000;
}
/*字体图标*/
/* CDN 服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
  font-family: 'iconfont';  /* Project id 3497269 */
  src: url('//at.alicdn.com/t/c/font_3497269_i90dr2zr9mi.woff2?t=1667460070836') format('woff2'),
       url('//at.alicdn.com/t/c/font_3497269_i90dr2zr9mi.woff?t=1667460070836') format('woff'),
       url('//at.alicdn.com/t/c/font_3497269_i90dr2zr9mi.ttf?t=1667460070836') format('truetype');
}
* {
  font-family: 'iconfont'; 
} 
.mainView {
  width: 100%;
  height: 90vh;
  overflow: scroll;
}
.banner {
  width: 100%;
  height: 10vh;
  background-color: rgb(229, 229, 229);
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.banner a {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.banner a span{
  font-size: 2rem;
}

.banner a div{
  font-size: .5rem;
}
</style>
